<template>
  <!-- 增删改查 dialog -->
  <div>
    <el-dialog
      :title="info.title"
      :visible.sync="info.show"
      width="80%"
      :close-on-click-modal="false"
      v-el-drag-dialog
      v-dialogDrag
      @open="dialogShow"
      @close="dialogClose"
      :destroy-on-close="true"
    >
      <div>
        <div class="dialog-info-customer-info" style="margin-bottom: 20px;">
          <div class="dialog-info-customer-info-title">结算单列表</div>
          <div class="dialog-info-order-left-form">
            <div class="dialog-info-order-left-form">
              <el-form
                ref="contractFromRef"
                size="mini"
                :inline="true"
                label-position="right"
                :model="contract.from.data"
              >
                <!-- <el-row> -->
                  <!-- <el-col :span="5"> -->
                    <el-form-item label="结算对象：" size="mini"  v-if="billFromShow">
                      <el-select
                        style="width:180px;"
                        filterable
                        clearable
                        placeholder="请选择"
                        v-model="contract.from.data.customer"
                      >
                        <el-option
                          v-for="item in payCustomerDropdowm"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  <!-- </el-col> -->
                  <!-- <el-col :span="10"> -->
                    <el-form-item label="结算时间：" size="mini"  prop="startTime">
                      <el-date-picker
                        type="datetime"
                        placeholder="选择起始时间"
                        v-model="contract.from.data.startTime"
                        style="width:180px;"
                      ></el-date-picker>
                      ———
                      <el-date-picker
                        type="datetime"
                        placeholder="选择终止时间"
                        v-model="contract.from.data.endTime"
                        style="width:180px;"
                      ></el-date-picker>
                    </el-form-item>
                  <!-- </el-col> -->
                  <!-- <el-col :span="5"> -->
                    <el-form-item>
                      <el-button
                        type="primary"
                        plain
                        size="mini"
                        style="margin-left:20px;"
                        @click="initOriginalBillTable"
                      >查询
                      </el-button>
                    </el-form-item>
                  <!-- </el-col> -->
                <!-- </el-row> -->
              </el-form>
            </div>
          </div>
          <div class="dialog-info-order-right-table">
            <el-table
              :data="originalBillTable.data"
              border
              :header-cell-style="{ textAlign: 'center' }"
              highlight-current-row
              @row-click="originalBillTableRowClick"
              :height="maxHeight"
            >
              <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
              <el-table-column align="center" prop="status" label="状态" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="type" label="费目" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="name" label="结算单名称" show-overflow-tooltip></el-table-column>
              <el-table-column
                align="center"
                prop="code"
                label="结算单号"
                show-overflow-tooltip
                width="250"
              ></el-table-column>
              <!--              <el-table-column-->
              <!--                align="center"-->
              <!--                width="120px"-->
              <!--                prop="sourcePayName"-->
              <!--                label="结算对象"-->
              <!--                show-overflow-tooltip-->
              <!--              ></el-table-column>-->
              <el-table-column
                align="center"
                prop="cmtNo"
                label="委托书编号"
                show-overflow-tooltip
                width="200"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="loadingPlace"
                label="装货地点"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column align="center" prop="unloadPlace" label="收货地点" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="weight" label="吨数" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="price" label="单价(元/吨)" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="totalPrice" label="金额(元)" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                ref="pagination"
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Pagination.currentPage"
                :page-sizes="Pagination.pageSizeList"
                :page-size="Pagination.PageSize"
                :layout="Pagination.layout"
                :total="Pagination.total"
              ></el-pagination>
            </div>
          </div>
        </div>
        <!-- 合同信息 -->
        <div class="dialog-info-customer-info">
          <div class="dialog-info-customer-info-title">合同信息</div>
          <!-- 合同列表 -->
          <div class="dialog-info-order-right-table">
            <div>
              <el-table
                :data="contract.table.data"
                @row-click="contractTableRowClick"
                border
                highlight-current-row
                height="200"
              >
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  type="index"
                  label="序号"
                  width="60"
                ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="合同编号" prop="no"></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="name"
                  label="合同名称"
                  width="150"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="托运人"
                  prop="shipper"
                  show-overflow-tooltip
                  width="200"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="consignment"
                  label="承运人"
                  width="200"
                ></el-table-column>
                <el-table-column prop="goodName" show-overflow-tooltip align="center" label="货物"></el-table-column>
                <el-table-column prop="price" show-overflow-tooltip align="center" label="费率"></el-table-column>
                <el-table-column prop="total" show-overflow-tooltip align="center" label="应收费用(元)"></el-table-column>
              </el-table>
              <el-pagination
                small
                background
                @size-change="contractSizeChange"
                @current-change="contractIndexChange"
                :current-page="contract.table.pageInfo.index"
                :page-sizes="[10,20,30]"
                :page-size="contract.table.pageInfo.size"
                layout="sizes, prev, pager, next, jumper, total"
                :total="contract.table.pageInfo.total"
                style="margin-top:10px;margin-bottom:10px;"
              ></el-pagination>
            </div>
          </div>
        </div>
        <!-- 结算单信息 -->
        <div class="dialog-info-bottom" v-if="billFromShow">
          <div class="dialog-info-bottom-tittle">结算单信息</div>
          <div class="dialog-info-bottom-from">
            <el-form
              ref="billFromRef"
              :model="bill.from.data"
              :rules="bill.from.rules"
              size="mini"
              label-position="right"
              label-width="120px"
              class="info-formm"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="结算单名称：" size="mini" prop="name">
                    <el-input
                      v-model="bill.from.data.name"
                      size="mini"
                      placeholder="格式如：某某客户2020年2月份营收结算单"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结算单号：" size="mini" prop="billNo">
                    <el-input disabled v-model="bill.from.data.billNo" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="金额：" size="mini" prop="allPrice">
                    <el-input v-model="bill.from.data.allPrice" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="备注" size="mini" prop="remark">
                    <el-input v-model="bill.from.data.remark" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="info.show = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addChargeBill, genBillNo, queryChargeBill, queryCollCustomer, queryInfoContract, updateBill, updateBillSelective} from '@/request/api'
import store from '@/store'
import mixPagination from '@/mixins/pagination'

export default {
  mixins: [mixPagination],
  data() {
    return {
      currentData: {},
      billFromShow: false,
      billId: '',
      payCustomerDropdowm: [], // 结算对象下拉
      payCustomerDropdowmParam: {
        checked: 1,
        cbId: ''
      },
      // 结算单临时数据
      billTableInterim: [],
      // 物流结算单
      originalBillTable: {
        data: [],
        index: 1,
        size: 10,
        total: 0
      },
      // 合同
      contract: {
        // 查询表单
        from: {
          data: {
            customer: '', // 结算对象
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            cbId: ''
          }
        },
        // 合同表格
        table: {
          data: [],
          currentData: {},
          pageInfo: {
            index: 1,
            size: 10,
            total: 0
          }
        }
      },
      // 结算单
      bill: {
        from: {
          data: {
            name: '', // 结算单名称
            allPrice: 0, // 总金额
            billNo: '',
            remark: '' // 备注
          },
          rules: {
            name: [
              {
                required: true,
                message: '请输入结算单名称',
                trigger: 'blur'
              }
            ],
            billNo: [
              {
                required: true,
                message: '请输入结算单号',
                trigger: 'blur'
              }
            ],
            allPrice: [
              {
                required: true,
                message: '请输入金额',
                trigger: 'blur'
              }
            ]
          }
        },
        table: {
          data: [],
          selectList: []
        }
      }
    }
  },
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  created() {
    this.Pagination.pageSizeList = [10, 20, 30]
    this.Pagination.pageSize = 10
  },
  methods: {
    // 初始化合同列表
    initContract() {
      queryInfoContract({
        index: this.contract.table.pageInfo.index,
        size: this.contract.table.pageInfo.size,
        startTime: this.contract.from.data.startTime,
        endTime: this.contract.from.data.endTime,
        billId: this.billId,
        bidId: this.currentData.bidId
      }).then(res => {
        this.contract.table.data = res.data
        this.contract.table.pageInfo.total = res.total
      })
    },
    // 初始化结算单列表
    initOriginalBillTable() {
      queryChargeBill({
        index: this.Pagination.currentPage,
        size: this.Pagination.pageSize,
        payB: this.contract.from.data.customer,
        isSearchInfo: 1,
        cbBillType: 'SHIP'
      }).then(res => {
        this.originalBillTable.data = res.data
        this.updatePaginationTotal(res.total)
      })
    },
    dialogClose() {
      this.billFromShow = true
      this.contract.table.data = []
      if (this.$refs.billFromRef != undefined) {
        this.$refs.billFromRef.resetFields()
      }
      this.$refs.contractFromRef.resetFields()
      this.$emit('dialogClose')
    },
    // 结算对象下拉框
    initPayCustomerDropdowm() {
      queryCollCustomer(this.payCustomerDropdowmParam).then(res => {
        this.payCustomerDropdowm = res.data
      })
    },
    // 查询合同列表
    searchContract() {
      this.initContract()
    },
    contractSizeChange(val) {
      this.contract.table.pageInfo.size = val
      this.initContract()
    },
    contractIndexChange(val) {
      this.contract.table.pageInfo.index = val
      this.initContract()
    },
    billTableSelectChange(val) {
      this.bill.table.selectList = val
    },
    // dialog显示回调
    dialogShow() {
      if (this.info.billFromShow == undefined) {
        this.billFromShow = true
      } else {
        this.billFromShow = this.info.billFromShow
      }
      this.billFromShow = false
      if (this.info.title == '编辑') {
        this.bill.from.data = this.info.data
        this.bill.from.data.billNo = this.info.data.code
        this.bill.from.data.allPrice = this.info.data.totalPrice
        this.billId = this.info.data.id
      } else {
        this.bill.from.data.billNo = ''
      }
      this.initOriginalBillTable()
      this.initPayCustomerDropdowm()
    },
    // 合同列表点击
    contractTableRowClick(val) {
      this.contract.table.currentData = val
      this.bill.from.data.allPrice = val.total
      if (this.info.title != '编辑' && !this.bill.from.data.billNo) {
        genBillNo({
          cbBillCmtId: this.contract.table.currentData.id
        }).then(res => {
          this.bill.from.data.billNo = res.msg
        })
      }
    },
    // 保存结算单
    save() {
      try {
        if (Object.keys(this.contract.table.currentData).length == 0) {
          this.$message.error('请至少选择一项')
          return
        }
        if (this.$refs.billFromRef != undefined) {
          this.$refs['billFromRef'].validate(v => {
            if (v) {
              if (this.info.title == '编辑') {
                updateBill({
                  cbId: this.info.data.id,
                  cbNo: this.contract.table.currentData.no,
                  cbBillCmtId: this.contract.table.currentData.id,
                  cbBillName: this.bill.from.data.name,
                  cbBillNo: this.bill.from.data.billNo,
                  cbBillStatus: '1',
                  cbPrice: this.contract.table.currentData.price,
                  cbRemark: this.bill.from.data.remark,
                  cbBillTotal: this.bill.from.data.allPrice,
                  cbIsDel: 0,
                  cbBillType: 'INFO',
                  cbJpayer: this.contract.table.currentData.payId,
                  cbWeight: this.contract.table.currentData.weight,
                  cbSettlemode: this.contract.table.currentData.payMethod,
                  cbType: this.contract.table.currentData.payType,
                  cbIsInfo: 'Y',
                  itemDTOList: [
                    {
                      cbiCmtId: this.contract.table.currentData.id,
                      cbiIsDel: 0
                    }
                  ]
                }).then(res => {
                  this.$message.success('修改成功')
                  this.info.show = false
                })
                return
              }
              addChargeBill({
                cbNo: this.contract.table.currentData.no,
                cbBillCmtId: this.contract.table.currentData.id,
                cbBillName: this.bill.from.data.name,
                cbBillNo: this.bill.from.data.billNo,
                cbBillStatus: '1',
                cbPrice: this.contract.table.currentData.price,
                cbRemark: this.bill.from.data.remark,
                cbBillTotal: this.bill.from.data.allPrice,
                cbIsDel: 0,
                cbBillType: 'INFO',
                cbFltId: this.contract.table.currentData.payId,
                cbJpayer: this.contract.table.currentData.payId,
                cbWeight: this.contract.table.currentData.weight,
                cbSettlemode: this.contract.table.currentData.payMethod,
                cbType: this.contract.table.currentData.payType,
                cbIsInfo: 'Y',
                itemDTOList: [
                  {
                    cbiCmtId: this.contract.table.currentData.id,
                    cbiIsDel: 0
                  }
                ]
              }).then(() => {
                this.$message.success('添加成功')
                this.info.show = false
              })
            }
          })
        } else {
          addChargeBill({
            cbNo: this.contract.table.currentData.no,
            cbBillCmtId: this.contract.table.currentData.id,
            cbBillName: '结算单',
            cbBillNo: this.bill.from.data.billNo,
            cbBillStatus: '1',
            cbPrice: this.contract.table.currentData.price,
            cbRemark: this.bill.from.data.remark,
            cbBillTotal: this.bill.from.data.allPrice,
            cbIsDel: 0,
            cbBillType: 'INFO',
            cbFltId: store.state.user.FLT_UUID_DX_H,
            cbJpayer: this.contract.table.currentData.payId,
            cbWeight: this.contract.table.currentData.weight,
            cbSettlemode: this.contract.table.currentData.payMethod,
            cbType: this.contract.table.currentData.payType,
            cbIsInfo: 'Y',
            itemDTOList: [
              {
                cbiCmtId: this.contract.table.currentData.id,
                cbiIsDel: 0
              }
            ]
          }).then(() => {
            updateBillSelective({
              cbIsInfo: 'Y',
              cbId: this.currentData.id
            }).then(() => {
              this.$message.success('添加成功')
              this.info.show = false
            })
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    originalBillTableRowClick(row) {
      this.currentData = row
      this.initContract()
    }
  }
}
</script>

<style lang="scss" scope>
.dialog-info-customer-info {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;

  .dialog-info-customer-info-title {
    position: absolute;
    top: -15px;
    background-color: white;
  }
}

.dialog-view-way-table {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  margin-top: 20px;

  .dialog-view-way-table-title {
    position: absolute;
    top: -15px;
    background-color: white;
  }
}

.dialog-info-bottom {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  margin-top: 20px;

  .dialog-info-bottom-tittle {
    position: absolute;
    top: -15px;
    background-color: white;
  }

  .dialog-info-bottom-from {
    margin-top: 15px;
  }

  .dialog-info-bottom-table-btn {
    margin-top: 5px;
    margin-bottom: 10px;
  }
}
</style>
